<template>
  <el-container>
    <el-header>
    </el-header>
    <el-main :style="{'padding-top':slide_h*0.2+'px'}">
      <el-row>
        <el-col id="loginrand2" :xs="24" :sm="{span:18,offset:3}" :md="{span:12,offset:6}" :lg="{span:8,offset:8}"
                :xl="{span:4,offset:10}">
          <el-card class=" transparent" style="border:0">
            <div slot="header" class="clearfix transparent"  style="border-bottom:0;min-height:20px;">
              <h3 v-if="$store.getters.getValForKey('sysConfig')!=null">{{$store.getters.getValForKey("sysConfig").webName}}后台管理系统</h3>
            </div>
            <h4>超级账号：admin 密码 123456【请登录之后，自己添加一个账号，然后给与超级管理员权限。不影响其他小伙伴预览】</h4>
            <el-form class="transparent" :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
              <el-form-item prop="userName">
                <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="请输入账号" type="text" clearable
                          v-model="ruleForm.userName" autocomplete="on">
                  <template slot="prepend">用户名</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="确认密码" type="password"
                          v-model="ruleForm.password" autocomplete="on" clearable>
                  <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                </el-input>
              </el-form-item>
              <el-form-item id="loginrand" prop="rand">
                <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="请输入验证码" type="text"
                          v-model="ruleForm.rand" autocomplete="on" clearable>
                  <template slot="prepend">验证码</template>
                  <template slot="append" style="padding:0;">
                    <el-tooltip effect="dark" content="点击刷新" placement="top">
                      <img ref="captcheurl" class="captcha" @click="changeCode(this)" :src="captcheurl"/>
                    </el-tooltip>
                  </template>
                </el-input>
                <!-- <el-tooltip effect="dark" content="一周内自定登录" placement="top">
                    <el-checkbox style="color:#ffffff" v-model="ruleForm.rememberMe">7天内自动登录</el-checkbox>
                </el-tooltip> -->
              </el-form-item>
              <el-form-item style="text-align:center">
                <el-button type="primary" style="min-width:50%" @click="submitForm('ruleForm')">登&nbsp;&nbsp;&nbsp;录
                </el-button>
                <!-- <el-button @click="resetForm('ruleForm2')">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <el-row>
        <el-col style="text-align:center;color:#fff">{{this.$store.getters.getConfig().companyName}}</el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>
<script type="es6">
  document.getElementById("app").style.height = window.document.body.offsetHeight + "px";
  const navbar = () =>
    import ('@/components/header/Navbar')
  export default {
    components: {
      "v-navbar": navbar
    },
    data() {

      // var checkAge = (rule, value, callback) => {
      //   if (!value) {
      //     return callback(new Error('年龄不能为空'));
      //   }
      //   setTimeout(() => {
      //     if (!Number.isInteger(value)) {
      //       callback(new Error('请输入数字值'));
      //     } else {
      //       if (value < 18) {
      //         callback(new Error('必须年满18岁'));
      //       } else {
      //         callback();
      //       }
      //     }
      //   }, 1000);
      // };
      // var validatePass = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请输入密码'));
      //   } else {
      //     if (this.ruleForm2.checkPass !== '') {
      //       this.$refs.ruleForm2.validateField('checkPass');
      //     }
      //     callback();
      //   }
      // };
      // var validatePass2 = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else if (value !== this.ruleForm.pass) {
      //     callback(new Error('两次输入密码不一致!'));
      //   } else {
      //     callback();
      //   }
      // };
      return {
        slide_h:document.body.offsetHeight - (164),
        time: new Date().getFullYear(),
        captcheurl: '',
        ruleForm: {
          userName: '',
          password: '',
          rand: ''
          // rememberMe:false
        },
        rules: {
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          rand: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var m = {
              userName: this.ruleForm.userName,
              password: this.proUtil.md5(this.proUtil.md5(this.ruleForm.password)),
              rand: this.ruleForm.rand
            };
            this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.login,lock:1,text:"正在登陆...."});
            this.proAPI.postJson(this.proAPI.URLS.login, m).then((res) => {
                // console.log(res.data);
                this.$store.state.CSRFToken = res.data.CSRFToken;
                localStorage.setItem(process.env.PROJECT_NAME+"CSRFToken",res.data.CSRFToken);
                this.$store.commit("saveToken", res.data.token);
                // console.log(this.$store.getters.getValForKey("beforeLoginUrl"));
                var beforeLoginUrl = this.$store.getters.getValForKey("beforeLoginUrl");
                this.$notify.success({
                  title: '欢迎回来',
                  message: '登录成功',
                  duration: 1000
                })
                //登陆成功自动新建客服房间
                if (!this.proUtil.isNull(beforeLoginUrl)) {
                  localStorage.removeItem("beforeLoginUrl");
                  localStorage.removeItem("beforeLoginTime");
                  //计算之前存储的登录之前的页面是否小于10分钟
                  if (this.proUtil.isNull(beforeLoginUrl) || (new Date().getTime() - (this.$store.getters.getValForKey("beforeLoginTime"))) > 600000) {
                    // console.log(1222222);

                    this.$router.replace("/home");
                  } else {
                    // console.log(233333333);
                    this.$router.replace(beforeLoginUrl);
                  }
                } else {
                  // console.log(24444444444);
                  this.$router.replace("/home");
                }

            });
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      changeCode() {
        var _ = this;
        this.proAPI.getFile(this.proAPI.URLS.getLoginCaptcha).then((res)=>{
              this.captcheurl = window.URL.createObjectURL(res);
        })
        // this.captcheurl = process.env.BASE_API + this.proAPI.URLS.getLoginCaptcha + "?t=" + new Date().getTime()
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted() {
      this.changeCode();
    }
  }
</script>
<style scoped>
  #loginrand >>> .el-input-group__append {
    padding: 0;
    border: 0;
  }

  /*#loginrand2 >>> .el-card {*/
    /*!*box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);*!*/
    /*background-color: transparent;*/
    /*background-image: linear-gradient(rgb(43, 197, 216), rgb(105, 155, 200));*/
  /*}*/

  #loginrand2 >>> .el-card__header {
    border-bottom: 0;
    color: #494949
  }

  .captcha {
    vertical-align: middle;
    min-width: 100px;
    background-color: rgba(0, 0, 0, 0.5)
  }
</style>
